<template>
    <div>
        <!-- 面包屑 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>商品管理</el-breadcrumb-item>
            <el-breadcrumb-item>商品列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面包屑 -->
        <br>
        <el-card>
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-input v-model="page.query">
                        <el-button
                            slot="append"
                            icon="el-icon-search"
                            @click="xr(page.query)"
                        ></el-button>
                    </el-input>
                </el-col>
                <el-col :span="16">
                    <el-button
                        type="primary"
                        @click="$router.push('/goodsAdd')"
                    >添加商品</el-button>
                </el-col>
            </el-row>
            <!-- 表格 -->
            <el-table :data="goodsList.goods">
                <el-table-column
                    label="#"
                    type="index"
                ></el-table-column>
                <el-table-column
                    label="商品名称"
                    prop="goods_name"
                ></el-table-column>
                <el-table-column
                    label="商品价格(元)"
                    prop="goods_price"
                ></el-table-column>
                <el-table-column
                    label="商品重量"
                    prop="goods_weight"
                ></el-table-column>
                <el-table-column label="创建时间">
                    <template slot-scope="scope">
                        <div>
                            {{scope.row.add_time|time}}
                        </div>
                    </template></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <div>
                            <!-- 编辑按钮 -->
                            <el-button
                                type="primary"
                                icon="el-icon-edit"
                                @click="dialogVisible=true"
                            >编辑</el-button>
                            <!-- 编辑按钮 -->
                            <!-- 删除按钮 -->
                            <el-button
                                type="danger"
                                icon="el-icon-delete"
                                @click="goodsDel(scope.row)"
                            >删除</el-button>
                            <!-- 删除按钮 -->
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 表格 -->
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="page.pagenum"
                :page-sizes="[3, 5, 10, 20]"
                :page-size="page.pagesize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
            <!-- 分页 -->
        </el-card>
    </div>
</template>

<script>
export default {
  data() {
    return {
      page: {
        query: "",
        pagenum: 1,
        pagesize: 3
      },
      goodsList: [],
      total: 0
    };
  },
  mounted() {
    this.xr(this.page.query);
  },
  methods: {
    //   渲染商品列表
    async xr() {
      let res = await this.$API.GoodsList(this.page);
      this.goodsList = res;
      console.log("商品列表", this.goodsList);
      this.total = res.total;
    },
    handleSizeChange(value) {
      this.page.pagesize = value;
      this.xr();
    },
    handleCurrentChange(value) {
      this.page.pagenum = value;
      this.xr();
    },
    // 商品删除
    async goodsDel(row) {
      let res = await this.$API.GoodsListDel(row.goods_id);
      console.log("商品删除", row);
      this.xr();
    },

  }
};
</script>

<style scoped >
</style>
